I'm working on a dynamic form that appends groups of input fields to the page based on user input. Because of some additional functionality that needs to be attached to some of these elements, I need to create them as JSON objects. When I test this method with only one input element, the element is appended to the page, no problem. However, when I try to incorporate a second element into the process, I get [object Object] [object Object] appended to the page instead.
Here's the gist...
//THIS IS THE PROBLEM FUNCTION, WHICH IS TRIGGERED BY THE CHANGE FUNCTION BELOW
function generateInput(siteNumber, x){
select = $("<select/>", {
id: 'select'+siteNumber+''+x+'',
name: 'select'+siteNumber+'['+x+']'
}).append(list);
notes = $("<input/>", {
type: 'text',
id: 'notes'+siteNumber+''+x+'',
name: 'notes'+siteNumber+'['+x+']'
});
//IF I RETURN ONE OR THE OTHER, NO PROBLEM
return select + notes;
};
$(document).on("change", ".number_select", function(){
siteNumber = $(this).parent().attr('data-site_number');
numberFound = $(this).val();
for(x = 1; x <= numberFound; x++){
this['inputArray' + siteNumber].push(generateInput(siteNumber, x));
};
$(this).parent().append(this['inputArray' + siteNumber]);
});
I imagine that the problem is with the way that I am returning the elements at the end of generateInput, but I'm not sure of the proper way to handle this. Basically, what I am aiming to get is the select element with the text element sitting next to it.
Thanks very much!
axelduch :
The + operator will call the toString() method of one of the terms if the other is a string.\n\nThis is not what you want, what you want instead is to merge the jQuery objects into one\n\nThus\n\nreturn select + notes;\n\n\nCould become (see jquery doc for add):\n\nreturn select.add(notes);\n",
2016-04-01T15:00:01